<template>
  <div class="EvaluateRecordList h-full">
    <MyTable
      ref="$table"
      v-model:query-items="queryItems"
      :columns="columns"
      :get-data="evaluateRecordApi.list"
    />
    <Teleport v-if="isMounted" :to="appStore.containerDom">
      <div class="teleport-area search-box">
        <div class="search-forms">
          <n-input
            v-model:value="queryItems.name"
            class="search"
            style="width: 300px"
            placeholder="测试名称/评估名称/被测对象名称"
            :clearable="true"
            @clear="goSearch"
            @keyup.enter="goSearch"
          >
            <template v-if="appStore.isDeep" #clear-icon>
              <img src="@/assets/images/deep-clear.svg" />
            </template>
            <template #suffix>
              <img :src="appStore.searchImg" />
            </template>
          </n-input>
        </div>
      </div>
    </Teleport>
  </div>
</template>
<script setup lang="jsx">
import * as evaluateRecordApi from '@/api/evaluateRecord'
import { useMounted } from '@/hooks/useMounted'
import { useAppStore } from '@/store'
defineOptions({
  name: 'EvaluateRecordList',
})
const appStore = useAppStore()
const queryItems = reactive({
  name: null,
})
const columns = [
  {
    title: '测试名称',
    key: 'testName',
  },
  {
    title: '评估名称',
    key: 'name',
  },
  {
    title: '被测对象名称',
    key: 'objectName',
  },
  {
    title: '数据集',
    key: 'datasetNames',
  },
  {
    title: '测试类型',
    key: 'testModeName',
  },
  {
    title: '创建时间',
    key: 'createTime',
    render: ({ createTime }) => $format(createTime),
  },
  {
    title: '操作',
    key: 'actions',
    width: 140,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render({ id, evaluationStatus }) {
      return (
        <n-flex>
          <ActionButton
            v-show={evaluationStatus === 'EVALUATION_COMPLETE'}
            onClick={() => router.push({ path: '/test/detail', query: { executeId: id } })}
          >
            评估报告
          </ActionButton>
          {/* <ActionButton>上架</ActionButton> */}
        </n-flex>
      )
    },
  },
]
const $table = ref(null)
const { isMounted } = useMounted()
const router = useRouter()

function goSearch() {
  nextTick(() => {
    $table.value.handleSearch()
  })
}
</script>
<style lang="scss" scoped></style>
